<template>
    <div class="check" style="zoom: 1.11" element-loading-text="数据量较大，请耐心等候。。。" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)" v-loading="loading">
        <el-row style="margin: 10px 0 10px 10px">
            <el-col :span="24" style="display: flex">
                <el-col :span="3">
                    <span style="line-height: 40px;">时间段查询：</span>
                </el-col>
                <el-col :span="16">
                    <el-date-picker
                            v-model="dateTimes"
                            type="datetimerange"
                            range-separator="至"
                            :picker-options="pickerOptions"
                            :default-time="['00:00:00']"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    <el-tooltip class="item" effect="dark" content="轨迹数据量较大,选择时间时请尽量选择小于等于1天查询!" placement="top" style="zoom: 0.9;">
                        <i class="el-icon-warning" style="margin-left: 20px"></i>
                    </el-tooltip>
                    <!--<div style="color: red;padding: 2px 0 0 0;font-size: 12px">提示:轨迹数据量较大,请尽量选择小于1天查询!</div>-->
                </el-col>
            </el-col>
        </el-row>
        <div style="padding: 0 10px;margin-bottom: -10px"  >
            <dialog-driver-trajectory :driver-detail="driverDetailData" :driver-task="driverTask" :driver-task-over="driverTaskOver"></dialog-driver-trajectory>
        </div>

    </div>
</template>

<script>
    import DialogDriverTrajectory from '../../components/dialogModel/DriverTrajectoryCopy.vue';

    export default {
        name: 'driver-detail',
        props: {
            params: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        components: {
            DialogDriverTrajectory
        },
        data() {
            return {
                pickerOptions: {
                    onPick:({maxDate, minDate})=>{
                        // console.info(maxDate, minDate)
                        if (this.getTimeStap(maxDate)-this.getTimeStap(minDate)>10000) {
                            // console.info('不能懂了',this.getTimeStap(maxDate))
                        }

                    }
                },
                dateTimesBegin: '',
                dateTimesEnd: '',
                driverDetailData: [],
                driverData:[],
                driverTask: [],
                driverTaskOver: [],
                dateTime: [],
                dateTimes: [],
                pageInfo: {
                    api: 'express/gps_record',
                    pageSize: 400,
                    page: 1
                },
                pageInfoTask: {
                    api: 'express/mission',
                    pageSize: 500,
                    page: 1
                },
                dataList: [],
                loading: false

            }
        },
        created() {
            // this.$emit('dialogTitle', '司机轨迹');
            this.getNowDate();
            // this.getDriveTask();
        },
        computed: {
            driverId:function (value) {
                return this.params.driverId;
            }
        },
        watch: {
            dateTimes: function (newValue) {
                if (newValue.length>0){
                    this.setDate(newValue)
                }

            }
        },
        methods: {
            getTimeStap(val){
                let d = new Date(val);
                let month = d.getMonth()+1;
                let strDate = d.getDate();
                let strSeconds = d.getSeconds();
                let strMinutes = d.getMinutes();
                let strHours = d.getHours();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if (strSeconds >= 0 && strSeconds <= 9) {
                    strSeconds = "0" + strSeconds;
                }
                if (strMinutes >= 0 && strMinutes <= 9) {
                    strMinutes = "0" + strMinutes;
                }
                if (strHours >= 0 && strHours <= 9) {
                    strHours = "0" + strHours;
                }
                let resDate = d.getFullYear() + '-' + month + '-' + strDate + ' ' + strHours + ':' + strMinutes + ':' + strSeconds;
                return Date.parse(resDate);
            },
            setDate(newValue){
                this.dateTime = [];
                newValue.forEach(item=>{
                    let d = new Date(item);
                    let month = d.getMonth()+1;
                    let strDate = d.getDate();
                    let strSeconds = d.getSeconds();
                    let strMinutes = d.getMinutes();
                    let strHours = d.getHours();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    if (strSeconds >= 0 && strSeconds <= 9) {
                        strSeconds = "0" + strSeconds;
                    }
                    if (strMinutes >= 0 && strMinutes <= 9) {
                        strMinutes = "0" + strMinutes;
                    }
                    if (strHours >= 0 && strHours <= 9) {
                        strHours = "0" + strHours;
                    }
                    let resDate = d.getFullYear() + '-' + month + '-' + strDate + ' ' + strHours + ':' + strMinutes + ':' + strSeconds;
                    this.dateTime.push(resDate);
                });
                this.pageInfo.page = 1;
                this.driverDetailData = [];
                this.driverTask = [];
                this.driverTaskOver = [];
                this.driverData = [];
                this.loading = true;
                this.getDriverDetailData();
                this.getDriveTask();
                this.getDriveTaskOver();
            },
            getNowDate() {
                let date = new Date();
                let seperator1 = "-";
                let month1 = date.getMonth();
                let month = date.getMonth()+1;
                let strDate = date.getDate();
                let strSeconds = date.getSeconds();
                let strHours = date.getHours();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if (strSeconds >= 0 && strSeconds <= 9) {
                    strSeconds = "0" + strSeconds;
                }
                if (strHours >= 0 && strHours <= 9) {
                    strHours = "0" + strHours;
                }
                let strDate1 = date.getDate() + 1;
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                this.dateTimes = [new Date(date.getFullYear(),month1,strDate,0,0,0), new Date(date.getFullYear(),month1,strDate1,0,0,0)];
            },
            getDriveTaskOver(){
                let query = {};
                query['pageSize'] = this.pageInfoTask.pageSize;
                query['page'] = this.pageInfoTask.page;
                query['driver_id'] = this.driverId;
                query['mission_status'] = 'completed_mission';
                query['created_at$'] = '>=' + this.dateTime[0] + ',<' + this.dateTime[1];
                this.$http.get(this.$larfree.httpQuery(query, this.pageInfoTask.api))
                    .then((res) => {
                        this.driverTaskOver = res.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getDriveTask(val) {
                let query = {};
                query['pageSize'] = this.pageInfoTask.pageSize;
                query['page'] = this.pageInfoTask.page;
                query['driver_id'] = this.driverId;
                query['mission_status'] = 'uncompleted';
                query['created_at$'] = '>=' + this.dateTime[0] + ',<' + this.dateTime[1];
                this.$http.get(this.$larfree.httpQuery(query, this.pageInfoTask.api))
                    .then((res) => {
                        this.driverTask = res.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });

            }, // 选中司机对应的任务
            getDriverDetailData() {
                let _this = this;
                let query = {};
                query['pageSize'] = this.pageInfo.pageSize;
                query['page'] = this.pageInfo.page;
                query['driver_id'] = this.driverId;
                query['created_at$'] = '>=' + this.dateTime[0] + ',<' + this.dateTime[1];
                this.$http.get(this.$larfree.httpQuery(query, this.pageInfo.api))
                    .then((response) => {
                        if (response.data.data && response.data.data.length > 0) {
                            response.data.data.forEach(item => {
                                _this.driverData.push(item);
                            });
                            _this.pageInfo.page ++;
                            new Promise(function (resolve, reject) {
                               _this.getDriverDetailData(resolve, reject);
                            });
                        } else {
                            _this.driverDetailData = _this.driverData;
                            if (_this.driverDetailData.length == 0) {
                                this.$message.warning('此司机无轨迹信息');
                            }
                            this.loading = false;
                            // reject;
                        }

                    })
                    .catch((error) => {
                        console.info('error',error.response)
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }
        }
    }
</script>

<style lang="less">
</style>
